<template>
	<Layout :showBack="true" :innerBottom="false">
		<template #title>账号申请</template>

		<view class="iflex column asc register-form">
			<uni-forms ref="formRef" :model="formData" :rules="rules">
				<uni-forms-item name="account" label="收款银行">
					<uni-easyinput v-model="formData.account" placeholder="请输入收款" :clearable="false"
						:inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item name="password" label="银行卡号">
					<uni-easyinput v-model="formData.password" placeholder="请输入联系方式" :clearable="false"
						:inputBorder="false" primaryColor="#FF710A" />
				</uni-forms-item>
				
				<uni-forms-item name="password" label="验证码">
					
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="iflex column fill aic" style="margin-top: 140rpx;">
			<u-button style="{width:100%}" :custom-style="{width:'686rpx'}" type="primary" size="large"
				@click.stop="tapSubmit">确定</u-button>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const formRef = ref();
	const formData = ref({
		account: '',
		password: ''
	});
	const rules = ref({
		account: {
			rules: [
				{ required: true, errorMessage: '请填写账号' },
				{
					minLength: 5,
					maxLength: 20,
					errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		},
		password: {
			rules: [
				{ required: true, errorMessage: '请填写密码' },
				{
					minLength: 6,
					maxLength: 30,
					errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
				}
			]
		}
	})

	function tapSubmit() {
		formRef.value.validate().then(res => {
			console.log('表单数据信息：', res);
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}
</script>

<style lang="scss">
	.register-form {
		margin-top: 48rpx;
		padding: 28rpx 28rpx 8rpx 28rpx;
		width: 686rpx;
		border-radius: 8rpx;
		background: #FFF;

		:deep(.uni-forms-item__label) {
			color: #000000;
			font-size: 32rpx;
			font-weight: 500;
		}

		:deep(.uni-easyinput__content) {
			border-radius: 6rpx !important;
			background-color: #F9F9F9 !important;

			.uni-easyinput__content-input {
				height: 92rpx !important;
				border-radius: 6rpx !important;
				padding: 0 30rpx;
				background-color: #F9F9F9;
			}
		}
	}
</style>